<!-- 导航栏 -->
<template>
  <div class="GfNavigation">
    <div :class="['label', { required: componentData.required }]">
      {{ componentData.label }}
    </div>
    <div class="value">
      <div class="description">
        <div class="description-item">
          可配置 2 至 5 个导航（可拖动改变导航顺序）
        </div>
        <div class="description-item red">【首页】与【我的】导航不可编辑</div>
      </div>
      <div class="tabs">
        <draggable
          class="tab-wrapper"
          :list="mValue"
          itemKey="id"
          :sort="true"
          ghost-class="ghost"
          :force-fallback="true"
        >
          <template #item="{ element, index }">
            <div class="tab-item" v-if="element.allowEdit">
              <div class="delete-icon" @click="deleteTab(index)">
                <close-circle-filled style="font-size: 16px; color: #aaa" />
              </div>
              <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="菜单图标">
                  <i
                    :class="['tab-icon', 'iconfont', element.icon]"
                    @click="showSelectIconModel(index)"
                  ></i>
                </a-form-item>
                <a-form-item label="菜单名称">
                  <a-input
                    v-model:value="element.text"
                    :maxlength="5"
                    :showCount="true"
                  />
                </a-form-item>
                <a-form-item label="跳转页面">
                  <div class="selected-jump-page">
                    <a-tag color="blue">
                      {{ showJumpPageText(element.jump) }}
                    </a-tag>
                    <a-button
                      type="link"
                      @click="showSelectJumpPageModel(index)"
                      size="small"
                      >修改</a-button
                    >
                  </div>
                </a-form-item>
              </a-form>
            </div>
          </template>
        </draggable>
        <div class="add-btn" v-show="mValue.length < 5">
          <a-button type="primary" block @click="addTab">新增</a-button>
        </div>
      </div>
    </div>

    <a-modal
      v-model:visible="selectIconModelVisible"
      wrapClassName="select-icon-model"
      title="选择图标"
      cancelText="取消"
      okText="确定"
      @ok="sureSelectIcon"
    >
      <div class="icon-list">
        <div
          :class="['icon-item', { active: selectedIconIndex === index }]"
          v-for="(item, index) in iconList"
          :key="index"
          @click="selectedIconIndex = index"
        >
          <i :class="['iconfont', item]"></i>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model:visible="selectJumpPageModelVisible"
      wrapClassName="select-jump-page-model"
      title="选择跳转页面"
      cancelText="取消"
      okText="确定"
      @ok="sureSelectJumpPage"
    >
      <a-tabs v-model:activeKey="activePageType">
        <a-tab-pane key="fixed" tab="微页面">
          <a-select
            v-model:value="selectedFixedPageIndex"
            style="width: 100%"
            :options="fixedPageList"
            :fieldNames="{ label: 'label', value: 'index', options: 'options' }"
          ></a-select>
        </a-tab-pane>
        <a-tab-pane key="custom" tab="自定义页面">
          <a-input placeholder="请输入链接地址" v-model:value="customPageUrl" />
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import draggable from 'vuedraggable'
import { CloseCircleFilled } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'GfNavigation',
  components: { draggable, CloseCircleFilled },
  props: ['value', 'componentData'],
  emits: ['update:value'],
  setup(props, context) {
    let mValue = ref()

    let executeOnce = false
    watch(
      () => props.value,
      (newVal) => {
        if (executeOnce || newVal === undefined) return
        executeOnce = true
        mValue.value = newVal
      },
      {
        immediate: true,
        deep: true
      }
    )

    watch(mValue, (newVal) => {
      context.emit('update:value', newVal)
    })

    const deleteTab = (index: number) => {
      mValue.value.splice(index, 1)
    }

    let currentEditTabIndex = ref(0)
    let selectIconModelVisible = ref(false)
    const iconList = [
      'icon-shouye',
      'icon-fuwu',
      'icon-liwuhuodong',
      'icon-weizhi',
      'icon-wode'
    ]
    let selectedIconIndex = ref(0)
    const showSelectIconModel = (index: number) => {
      currentEditTabIndex.value = index
      selectIconModelVisible.value = true
      selectedIconIndex.value = iconList.findIndex(
        (i) => i === mValue.value[index].icon
      )
    }
    const sureSelectIcon = () => {
      mValue.value[currentEditTabIndex.value].icon =
        iconList[selectedIconIndex.value]
      selectIconModelVisible.value = false
    }

    const selectJumpPageModelVisible = ref(false)
    let activePageType = ref('fixed') // 页面类型（fixed：微页面；custom: 自定义页面）
    let customPageUrl = ref('')
    const fixedPageList = [
      { label: '首页', value: 0, index: 0 },
      { label: '服务', value: 1, index: 1 },
      { label: '活动', value: 2, index: 2 },
      { label: '阵地', value: 3, index: 3 },
      { label: '我的', value: 4, index: 4 }
    ]
    let selectedFixedPageIndex = ref(0)
    const showJumpPageText = computed(() => {
      return (jumpConfig: Record<string, any>) => {
        if (jumpConfig.type === 'fixed') {
          return fixedPageList.find((i) => i.value == jumpConfig.url)?.label
        } else {
          return '外链'
        }
      }
    })
    const showSelectJumpPageModel = (index: number) => {
      currentEditTabIndex.value = index
      activePageType.value = mValue.value[index].jump.type
      selectJumpPageModelVisible.value = true
    }
    const sureSelectJumpPage = () => {
      if (activePageType.value === 'fixed') {
        mValue.value[currentEditTabIndex.value].jump = {
          type: 'fixed',
          url: selectedFixedPageIndex.value
        }
      } else {
        mValue.value[currentEditTabIndex.value].jump = {
          type: 'custom',
          url: customPageUrl.value
        }
      }
      selectJumpPageModelVisible.value = false
    }

    const addTab = () => {
      mValue.value.splice(-1, 0, {
        id: new Date().getTime(),
        icon: 'icon-fuwu',
        text: '菜单',
        allowEdit: true,
        jump: { type: 'custom', url: '' }
      })
    }

    return {
      mValue,
      deleteTab,
      currentEditTabIndex,
      selectIconModelVisible,
      iconList,
      selectedIconIndex,
      showSelectIconModel,
      sureSelectIcon,
      selectJumpPageModelVisible,
      activePageType,
      customPageUrl,
      fixedPageList,
      selectedFixedPageIndex,
      showJumpPageText,
      showSelectJumpPageModel,
      sureSelectJumpPage,
      addTab
    }
  }
})
</script>

<style lang="scss" scoped>
.GfNavigation {
  .label {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: rgba($color: #000000, $alpha: 0.85);
    &.required::before {
      content: '*';
      color: #ff4d4f;
      font-size: 14px;
      margin-right: 4px;
    }
  }
  .value {
    .description {
      .description-item {
        font-size: 12px;
        color: #969799;
        &.red {
          color: #ee0a24;
        }
      }
    }
    .tabs {
      padding: 20px 0;
      .tab-wrapper {
        .tab-item {
          box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.08);
          margin-bottom: 10px;
          padding: 10px;
          position: relative;
          &:hover {
            .delete-icon {
              display: block;
            }
          }
          :deep(.ant-form-item) {
            margin-bottom: 0;
            margin-top: 10px;
            &:first-child {
              margin-top: 0;
            }
            .ant-form-item-control-input-content {
              line-height: 1;
            }
          }
          .delete-icon {
            display: none;
            position: absolute;
            top: -4px;
            right: -4px;
            cursor: pointer;
            font-size: 0;
          }
          .tab-icon {
            font-size: 32px;
            cursor: pointer;
          }
          .selected-jump-page {
            .ant-tag {
              margin-right: 0;
            }
          }
        }
      }
      .add-btn {
      }
    }
  }
}
</style>
<style lang="scss">
.select-icon-model {
  .icon-list {
    display: flex;
    flex-wrap: wrap;
    .icon-item {
      border: 1px solid transparent;
      padding: 5px;
      border-radius: 4px;
      margin-right: 10px;
      line-height: 1;
      cursor: pointer;
      &:hover,
      &.active {
        border-color: #1890ff;
      }
      .iconfont {
        font-size: 32px;
      }
    }
  }
}
.select-jump-page-model {
  .ant-modal-body {
    padding-top: 0;
  }
}
</style>
